<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="app">
        我要打分：<input v-model.number="starnumber">
        星星总数：<input v-model.number="stars">
        <star :starnum='starnum' :stars='stars' @input='changenum'></star>
    </div>
    <script src='vue.js'></script>
    <script type="text/html" id="star">
        <div class='star-box'>
            <p>满意度：{{starnum|percent(stars)}}</p>
            <div v-for='n in stars' class='star starcount' @mousedown='mousedown(n)'></div>
            <div class='star-div'>
                <div  v-for="n in format" :style='n==format?stylelist:repstyle' class='star starbg' @mousedown='mousedown(n)' ></div>
            </div>
        </div>
    </script>
    <script>
        Vue.component('star',{
            template:'#star',
            data:function(){
                return {
                    isdown:false,
                    downnum:0,
                }
            },
            props:['stars','starnum'],
            computed:{
                format:function(){
                    return Math.ceil(this.starnum)
                },   
                stylelist:function(){
                    return {
                        width:100*(1-this.format + this.starnum)+'px',
                    }
                },
                 repstyle:function(){
                    return {
                        width:100+'px',
                    }
                 } 
            },
            filters:{
                width:function(v){
                    return v + 'px'
                },
                percent:function(v,n){
                    var per = v / n
                    if(per>=1){
                        return '非常满意'
                    }else if(per>=0.75){
                        return '还不错'
                    }else if(per>=0.5){
                        return '一般'
                    }else if(per>=0.25){
                        return '有点差'
                    }else{
                        return '非常差'
                    }
                }
            },
            methods:{
                mousedown:function(n){

                    if((n-0.5)>this.starnum)
                    {
                        n=n-0.5
                    }
                    else if((n-0.5)==this.starnum){
                        n=n
                    }
                   else{
                        n = n - 1
                    }
                    this.$emit('input',n) 
                }, 
            }
        })
        var app = new Vue({
            el:'#app',
            data:{
                starnumber:5,
                stars:5,
            },
            computed:{
                starnum:function(){
                    if(this.starnumber>this.stars){
                        return this.stars
                    }else{
                        return this.starnumber
                    }
                }
            },
            methods:{
                changenum:function(n){
                    this.starnumber = n
                }
            }
        })
    </script>
</body>
</html>